<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.custom-tree-node {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
::v-deep .el-tree-node__content {
    height: 60px;
}
</style>
<!-- tsx -->
<template>
    <div class="package">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-tickets"></i> 团队架构 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input
                    clearable
                    v-model="query.mobile"
                    style="width: 200px; margin: 0 20px 0 0"
                    placeholder="会员手机号"
                    class="handle-input mr10"
                ></el-input>
                <el-input
                    clearable
                    v-model="query.openid"
                    style="width: 200px; margin: 0 20px 0 0"
                    placeholder="会员ID"
                    class="handle-input mr10"
                ></el-input>
                <el-button type="primary" @click="loadData({lk:1})">搜索</el-button>
            </div>
            <!-- <el-table :data="tableData" height="400" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="" label="头像" align="center">
                    <template slot-scope="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.avatarUrl" :preview-src-list="[scope.row.portrait]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickName" label="昵称" width="100" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.nickName }}
                    </template>
                </el-table-column>
                <el-table-column prop="rank" label="会员等级" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="mobile" label="会员手机号" align="center" how-overflow-tooltip></el-table-column>
                <el-table-column prop="openid" label="会员ID" width="200" align="center" how-overflow-tooltip></el-table-column>
                <el-table-column prop="teamCount" label="团队人数" align="center" how-overflow-tooltip></el-table-column>
                <el-table-column prop="packageCount" label="个人下单数量" width="150" align="center" how-overflow-tooltip></el-table-column>
                <el-table-column prop="ptCount" label="拼团数量" align="center" how-overflow-tooltip></el-table-column>
                <el-table-column prop="ztCount" label="组团数量" width="200" align="center" how-overflow-tooltip> </el-table-column>
                <el-table-column prop="goodsAmount" label="个人复销业绩" align="center" how-overflow-tooltip> </el-table-column>
                <el-table-column prop="teamGoodsAmount" label="团队复销业绩" align="center" how-overflow-tooltip> </el-table-column>
            </el-table> -->
            <el-tree lazy :load="loadData" :data="tableData" node-key="id" :expand-on-click-node="false">
                <div class="custom-tree-node" slot-scope="scope" style="display:flex">
                    <div style="display:flex;align-items: center;font-size:13px">
                        <el-image style="width: 50px; height: 50px" :src="scope.data.avatarUrl" :preview-src-list="[scope.node.portrait]">
                        </el-image>
                        <!-- {{data}} -->
                        <div style="margin:0 10px"><span style="color:#999">昵称：</span>{{ scope.data.nickName }}</div>
                        |
                        <div style="margin:0 10px"><span style="color:#999">会员等级：</span>{{ scope.data.rank }}</div>
                        |
                        <div style="margin:0 10px"><span style="color:#999">会员手机号：</span>{{ scope.data.mobile }}</div>
                    </div>
                    <div style="margin:0 20px 0 0">
                        <el-tooltip class="item" effect="light" content="Top Center 提示文字" placement="bottom">
                            <div slot="content">
                                <el-table
                                    :data="[scope.data]"
                                    border
                                    ref="multipleTable"
                                    header-cell-class-name="table-header"
                                >
                                    <el-table-column prop="" label="头像" align="center">
                                        <template slot-scope="scope">
                                            <el-image
                                                style="width: 50px; height: 50px"
                                                :src="scope.row.avatarUrl"
                                                :preview-src-list="[scope.row.portrait]"
                                            >
                                            </el-image>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="nickName" label="昵称" width="100" align="center">
                                        <template slot-scope="scope">
                                            {{ scope.row.nickName }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="rank" label="会员等级" align="center" show-overflow-tooltip> </el-table-column>
                                    <el-table-column prop="mobile" label="会员手机号" align="center" how-overflow-tooltip></el-table-column>
                                    <el-table-column
                                        prop="openid"
                                        label="会员ID"
                                        width="200"
                                        align="center"
                                        how-overflow-tooltip
                                    ></el-table-column>
                                    <el-table-column
                                        prop="teamCount"
                                        label="团队人数"
                                        align="center"
                                        how-overflow-tooltip
                                    ></el-table-column>
                                    <el-table-column
                                        prop="packageCount"
                                        label="个人下单数量"
                                        width="150"
                                        align="center"
                                        how-overflow-tooltip
                                    ></el-table-column>
                                    <el-table-column prop="ptCount" label="拼团数量" align="center" how-overflow-tooltip></el-table-column>
                                    <el-table-column prop="ztCount" label="组团数量" width="200" align="center" how-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column prop="goodsAmount" label="个人复销业绩" align="center" how-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column prop="teamGoodsAmount" label="团队复销业绩" align="center" how-overflow-tooltip>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <el-button>详情</el-button>
                        </el-tooltip>
                    </div>
                </div>
            </el-tree>
        </div>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { QueryTeam } from '@/api/vip';
import { WithdrawFail } from '@/api/finance';
export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        // 这里存放数据
        return {
            query: {
                pageIndex: 1,
                pageSize: 20
            },
            pageTotal: 0,
            senInfoShow2: false,
            tableData: [],
            rankList: [],
            senInfoShow: false,
            senInfo: {},
            senInfo2: {}
        };
    },
    // 过滤器
    filters: {},
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        getList() {
            QueryTeam(this.query).then(res => {
                this.tableData = res.Data.list;
                // this.pageTotal = res.Data.paging.totalItemCount;
                // this.rankList = res.Data.rankList
            });
        },
        loadData(node, resolve) {
            let data = {
              id:node.key,
              openid:this.query.openid || null,
              mobile:this.query.mobile || null
            }
            QueryTeam(data).then(res => {
              if(node.lk == 1){
                this.tableData = res.Data.list;
              }else{
                resolve(res.Data.list);
                if(!res.Data.list.list){
                  this.$message.success('没有子集了')
                }
              }
              
            })
            
        },
        append(data) {
            data.node.childNodes = [{ id: '123', nickName: 'lll' }];
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log(123);
        // this.getList();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    ctivated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
